/**
 * author:shinion
 * date:2019-10-23
 * 功能：
 *      主页面样式功能插件，当主页面选项卡选择或者大小改变后，重新设置各个控件的大小
 * 
 */

var M_layout = {};
M_layout.debug = true;
M_layout.mainTabId = 'mainTab';
M_layout.menuTopValue = 30;//上侧预留的菜单控件高度
M_layout.leftValue = 300;//主页面左侧功能面板宽度
M_layout.topValue = 109;//主页面上侧菜单面板高度
M_layout.buttomValue = 13;//主页面上最底部状态栏高度
M_layout.hideZindexValue = '-100';//隐藏索引值
M_layout.showZindexValue = '0';//显示索引值
M_layout.realDataToolDivDefaultHeight = 240;//定义实时数据栏的默认高度


//////////////////////////////////////////////////////////初始化

//获取当前面板大小数据
M_layout.getSizeData = function(){
    let size = {
        centWidth:0,//整个中间区域的宽度
        centHeight:0,//整个中间区域高度
        buttomHeight:0,//底部实时数据栏高度
        title:'',//当前选项卡
    };
    let pp = $('#' + this.mainTabId).tabs('getSelected');
    let panelOptions = pp.panel('options');
    size.title = panelOptions.title;

    //整个窗体的width-300(左侧面板默认宽度)，为中央面板的宽度
    this.leftValue = $("#m_body_layout").layout('panel', 'west').panel('options').width;
    size.centWidth = document.documentElement.clientWidth - this.leftValue;

    //整个窗体的height-118(底部面板默认高度)，为中央面板的高度
    size.centHeight = document.documentElement.clientHeight - this.topValue - this.buttomValue;


    //底部实时数据栏的高度
    this.realDataToolDivDefaultHeight = $("#centerLayout").layout('panel', 'south').panel('options').height;
    size.buttomHeight = this.realDataToolDivDefaultHeight;

    return size;
}



//////////////////////////////////////////////////////////事件方法接口

//页面大小改变事件
M_layout.onBodyResized = function(){
    let size = this.getSizeData();
    // this.outDebug("开始执行页面大小改变事件,当前标题为：" + size.title + " ， 面板大小数据：" ,size);
    this.initNowTab(size);
}

//主面板选项卡选择事件
M_layout.onMainTabSelect = function(title){
    let that = M_layout;
    let size = that.getSizeData();
    // that.outDebug("主面板选项卡选择事件,title= " + title + " ， 面板大小数据为：" ,size);
    size.title = title;
    that.initNowTab(size);
}



//实时数据栏大小改变事件
//最后会直接输出宽高，第一参数为宽，第二参数为高
M_layout.realDataPanelResize = function(arg1,arg2){
    if(!isNaN(arg2)){//只需要实时数据栏的高度，即第二参数
        // M_layout.outDebug("实时数据栏大小改变事件,arg1 :" ,arg1);
        let that = M_layout;
        if(arg2 != that.realDataToolDivDefaultHeight){
            M_layout.outDebug("实时数据栏大小改变事件,arg2 :" ,arg2);
            let size = that.getSizeData(-1,arg2);
            that.initNowTab(size);
        }
    }
}

//左侧面板栏大小改变事件
//最后会直接输出宽高，第一参数为宽，第二参数为高
M_layout.leftPanelResize = function(arg1,arg2){
    if(!isNaN(arg1)){//只需要左侧面板的宽度，即第一参数
        // M_layout.outDebug("左侧面板栏大小改变事件,arg2 :" ,arg2);
        let that = M_layout;
        if(arg1 != that.leftValue){
            M_layout.outDebug("左侧面板栏大小改变事件,arg1:" ,arg1);
            let size = that.getSizeData(arg1,-1);
            that.initNowTab(size);
        }
    }
}


//初始化当前面板
M_layout.initNowTab = function(size){
    let that = this;

    //设置实时视频框架隐藏
    $("#videoContent").css("z-index", that.hideZindexValue);
    //隐藏历史视频控件
    $("#videoPlaybackContent").css("width", size.centWidth).css("height", size.centHeight).css("left", this.leftValue+"px")
		.css("top", this.topValue + "px")
        .css("z-index", that.hideZindexValue);

    //根据面板标题，进行不同的设置
    switch (size.title) {
        default:
            that.initDefaultTab();
            break;
        case '综合监控':
            that.initRealTimeMonitor(size);
            break;
        case '实时视频':
            that.initRealtimeVideo(size);
            break;
        case '历史视频':
            that.initPlayBackVideo(size);
            break;
        case '主动安全报警详细信息':
            that.initAdasDetailTab(size);
            break;
    }
}

//////////////////////////////////////////////////////////具体事件

//初始化默认面板数据
M_layout.initDefaultTab = function(){
    $("#videoContent").css("z-index", this.hideZindexValue);
    $("#videoPlaybackContent").css("z-index", this.hideZindexValue);
}

//初始化综合监控相关
M_layout.initRealTimeMonitor = function(size){
    // this.outDebug('开始初始化实时监控面板');
    //重置大小，预留菜单控件空间
    $("#videoContent").css("width",size.centWidth).css("height", size.centHeight).css("left", this.leftValue + "px")
        .css("top", this.topValue + "px")
    //显示面板
    $("#videoContent").css("z-index", M_layout.showZindexValue);
    //设置大小
    $("#centerLayout").attr("style", "width:" + size.centWidth + "px;height:" + size.centHeight + "px");
    $('#centerLayout').layout('panel', 'center').panel("resize", { width: 0 });
    $('#centerLayout').layout('panel', 'east').panel("resize", { width: size.centWidth });
    $("#centerLayout").layout("resize", {
        width: size.centWidth,
        height: size.centHeight
    });
    
}

//初始化实时视频相关
M_layout.initRealtimeVideo = function(size){
    //显示面板
    $("#videoContent").css("width",size.centWidth).css("height", size.centHeight).css("left", this.leftValue + "px")
        .css("top", this.topValue + "px");
    $("#videoContent").css("z-index", M_layout.showZindexValue);
    //设置大小
    var mapWidth = size.centWidth * 25 / 100;
    $("#centerLayout").attr("style", "width:" + size.centWidth + "px;height:" + size.centHeight + "px");
    $('#centerLayout').layout('panel', 'center').panel("resize", { width: size.centWidth - mapWidth});
    // M_layout.outDebug("当前中间面板高度：" +size.centHeight + " ， 底部栏高度：" + size.buttomHeight + " , 中间高度为：" + (size.centHeight - size.buttomHeight));
    $('#centerLayout').layout('panel', 'center').panel("resize", { height:size.centHeight});
    $('#centerLayout').layout('panel', 'east').panel("resize", { width: mapWidth });
    $("#centerLayout").layout("resize", {
        width: size.centWidth,
        height: size.centHeight
    });

    //显示实时视频页面
    showRealTimeVideoPage();
}

//初始化历史视频相关
M_layout.initPlayBackVideo = function(size){
    $("#videoPlaybackContent").css("z-index", M_layout.showZindexValue);
}

//初始化主动安全报警详细信息
M_layout.initAdasDetailTab = function(size){
    this.outDebug("开始执行主动安全报警显示页面,当前标题为：" + size.title + " ， 面板大小数据：" ,size);
    //重设层区域和层位置
    $("#videoContent").css("width", size.centWidth).css("height", size.buttomHeight).css("left",  this.leftValue+ "px")
        .css("top", (this.topValue + size.centHeight - size.buttomHeight) + "px")
        .css("z-index", this.showZindexValue);
    $("#centerLayout").attr("style", "width:" + size.centWidth + "px;height:" + size.buttomHeight + "px");
    $("#centerLayout").layout("resize", {
        width: size.centWidth + "px",
        height: size.buttomHeight + "px"
    });
    $('#centerLayout').layout('expand', 'south');

    //重设面板高度
    let pp = $('#mainTab').tabs('getSelected');
    pp.css("height", size.centHeight - size.buttomHeight);
}




//////////////////////////////////////////////////////////公共方法
//输出调试信息
M_layout.outDebug = function(msg,data){
    if(this.debug == true){
        DataUtil.outDebug(msg,data);
    }
}